<template>
  <div class="dialog">
    <van-cell-group title="基础展示" inset>
      <van-cell title="基础弹窗" clickable @click="onOpen('visibleOne')" />
      <van-cell
        title="带有标题的弹窗"
        clickable
        @click="onOpen('visibleTwo')"
      />
      <van-cell
        title="锁定背景的弹窗"
        clickable
        @click="onOpen('visibleThree')"
      />
      <van-cell
        title="带有滚动条的弹窗"
        clickable
        @click="onOpen('visibleFour')"
      />
      <van-cell
        title="固定在底部的弹窗"
        clickable
        @click="onOpen('visibleFive')"
      />
    </van-cell-group>
    <xrk-dialog :visible="visibleOne" @close="onClose('visibleOne')">
      这是一个空的弹窗什么也没有
    </xrk-dialog>
    <xrk-dialog
      :visible="visibleTwo"
      title="我是标题,右边是关闭按钮"
      :icon-src="require('../assets/icon_close.png')"
      @close="onClose('visibleTwo')"
    >
      这是一个带有标题和关闭按钮的弹窗
    </xrk-dialog>
    <xrk-dialog
      :visible="visibleThree"
      title="我是标题右边是关闭按钮"
      :icon-src="require('../assets/icon_close.png')"
      @close="onClose('visibleThree')"
      :lock="true"
    >
      点击弹窗外的区域将不会关闭弹窗
    </xrk-dialog>
    <xrk-dialog
      :visible="visibleFour"
      :maxheight="0.6"
      title="带有滚动条的弹窗"
      :icon-src="require('../assets/icon_close.png')"
      @close="onClose('visibleFour')"
    >
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
      <p style="margin: 20px">超过设置的限定高度将产生滚动条</p>
    </xrk-dialog>
    <xrk-dialog
      :visible="visibleFive"
      width="100%"
      vertical="bottom"
      title="固定在下方的弹窗"
      :icon-src="require('../assets/icon_close.png')"
      @close="onClose('visibleFive')"
    >
      这是一个固定在下方的弹窗
    </xrk-dialog>
  </div>
</template>


<script>
import xrkDialog from "../components/XrkDialog/index.vue";
export default {
  name: "dialog-test",
  data() {
    return {
      visibleOne: false,
      visibleTwo: false,
      visibleThree: false,
      visibleFour: false,
      visibleFive: false,
    };
  },
  components: {
    xrkDialog,
  },
  methods: {
    onOpen(visible) {
      this[visible] = true;
    },
    onClose(visible) {
      this[visible] = false;
    },
  },
};
</script>

<style lange="scss" scoped>
</style>